<template>
	<div>
		<el-form ref="userinfo" :model="userinfo" label-width="80px">
			<el-form-item label="用户名">
				<el-input readonly v-model="userinfo.username"></el-input>
			</el-form-item>
			<el-form-item label="手机号">
				<el-input v-model="userinfo.phone"></el-input>
			</el-form-item>
			<el-form-item label="姓名">
				<el-input v-model="userinfo.realname"></el-input>
			</el-form-item>
			<el-form-item label="邮箱">
				<el-input v-model="userinfo.email"></el-input>
			</el-form-item>
			<el-form-item label="性别">
				<el-radio v-model="userinfo.sex" :label="1">男</el-radio>
				<el-radio v-model="userinfo.sex" :label="2">女</el-radio>
			</el-form-item>
			<el-form-item>
				<el-button type="primary" @click="confirmEdit">确认</el-button>
				<el-button @click="resetForm('userinfo')">重置</el-button>
			</el-form-item>
		</el-form>
	</div>
</template>

<script>
export default {
	name: 'info',
	data(){
		return {
			userinfo: {}
		}
	},
	created(){
		this.userinfo = JSON.parse(localStorage.getItem('USERINFO'))
		sessionStorage.setItem('userinfo', JSON.stringify(this.userinfo))
	},
	methods: {
		async confirmEdit() {
			const { data } = await this.http({
				method: "post",
				url: "/admin/useredit",
				data: this.userinfo,
			});
			if (data.errno !== 0) {
				return this.msg({
					type: "error",
					message: "编辑失败",
				});
			}
			this.msg({
				type: "success",
				message: data.message,
				onClose: () => {
					localStorage.setItem('USERINFO', JSON.stringify(this.userinfo))
					sessionStorage.setItem('userinfo', JSON.stringify(this.userinfo))
					location.reload()
				},
			});
		},
		resetForm() {
			this.userinfo = JSON.parse(sessionStorage.getItem("userinfo"));
		},
	}
}
</script>

<style lang="less" scoped>
.el-form {
	width: 450px;
}
</style>
